<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue学习</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h3>{{title}}</h3>
      <!-- 
        v-bind指令来给属性来设置动态的值
        语法：
          v-bind:src="变量"
          因为此动态设置属性的操作在vue中特别多，所以vue给提供一个简写的方式
          :src="变量"
        img中的src属性它的值是要动态的值
       -->
      <!-- <img v-bind:src="'http://video.1314000.cn/face.png'" alt=""> -->
      <!-- <img v-bind:src="src" alt=""> -->
      <!-- <img :src="src" :alt="title" :title="title" /> -->
      <img :src="src+'?v=1'" :alt="title" :title="title" />
      <hr>
      <div title="aaa">字符串</div>
      <div :title="100">数字</div>
      <div :title="false">布尔</div>
      <div :title="[1,2]">数组</div>
      <div :title="{a:1,b:2}">对象</div>
    </div>
    <script>
      const app = Vue.createApp({
        // data中的数据，称为动态数据，以后会通过ajax从接口中来得到的
        data() {
          return {
            title: 'logo图片',
            src: 'http://video.1314000.cn/face.png'
          }
        }
      })
      app.mount('#app')
    </script>
  </body>
</html>
